<template>
    <div>
        <!-- {{ salesList }} -->
        <el-table :data="salesList" border style="width: 99%;height: 80vh;">

            <el-table-column align="center" fixed width="180">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">项目编号</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.salesCode == null ? "无" : scope.row.salesCode }}
                </template>
            </el-table-column>

            <el-table-column align="center" fixed width="160">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">项目类型</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    <el-text class="mx-1" size="small">{{ scope.row.projectType == null ? "无" : scope.row.projectType
                    }}</el-text>

                </template>
            </el-table-column>



            <el-table-column align="center" prop="updName" width="160" fixed="right">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">销售预测单</el-text>
                </template>
                <template #default="scope"><!--自定义列-->

                    <el-text class="mx-1" type="primary" style="cursor: pointer;"
                        @dblclick="on_skipCode2(scope.row.salesForecastCode)" size="small">{{ scope.row.salesForecastCode ==
                            null ? "无"
                            : scope.row.salesForecastCode
                        }}</el-text>

                </template>
            </el-table-column>



            <el-table-column align="center" width="120">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">客户信息</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>
                                <el-tag class="mx-1" type="" effect="light" size="small">客&ensp;户&ensp;名&ensp;称&ensp;:
                                </el-tag>
                                <el-tag class="mx-1" type="" effect="light" size="small">{{ scope.row.custName == null ? "无"
                                    :
                                    scope.row.custName }} </el-tag>
                            </div>
                            <div>
                                <el-tag class="mx-1" type="" effect="dark" size="small"> 客户联系方式:</el-tag>
                                <el-tag class="mx-1" type="" effect="light" size="small">{{ scope.row.custPhone == null ?
                                    "无" :
                                    scope.row.custPhone }} </el-tag>
                            </div>
                            <div>
                                <el-tag class="mx-1" type="success" effect="dark" size="small">客&ensp;户&ensp;地&ensp;址&ensp;:
                                </el-tag>
                                <el-tag class="mx-1" type="success" effect="light" size="small">{{ scope.row.custAddress ==
                                    null ? "无" :
                                    scope.row.custAddress }} </el-tag>
                            </div>
                        </template>
                        <template #reference>
                            <el-tag>{{ scope.row.custName == null ? "无名称" : scope.row.custName }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column align="center" sortable width="210" prop="strTime">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">要求(开始~结束)时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.strTime != null ? scope.row.strTime.substring(0, 10) : '未定' }}
                    ~
                    {{ scope.row.endTime != null ? scope.row.endTime.substring(0, 10) : '未定' }}
                </template>
            </el-table-column>

            <el-table-column align="center" sortable prop="actualEndTime" width="155">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">实际结束时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.actualEndTime != null ? scope.row.actualEndTime.substring(0, 10) : '尚未' }}
                </template>
            </el-table-column>

            <el-table-column align="center" sortable prop="amount" width="120">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">含税金额</el-text>
                    <!-- <el-button :icon="amountEX?'Unock':'Lock'"/> -->
                    <el-row @click.stop="on_amountEX()" style="display:inline-block;">
                        <el-icon v-if="amountEX">
                            <Unlock />
                        </el-icon>
                        <el-icon v-else>
                            <Lock />
                        </el-icon>
                    </el-row>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ amountEX ? (scope.row.amount == null ? "" : scope.row.amount + '万元') : '***' }}
                </template>
            </el-table-column>



            <el-table-column align="center" sortable prop="isScheme" width="130">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">是否需要方案</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    预测表获取
                    {{ scope.row.isScheme ? '是' : '否' }}
                </template>
            </el-table-column>



            <el-table-column align="center" prop="userName" width="120" fixed="right">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">参与人</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.userName }}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="updName" width="120" fixed="right">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">当前修改人</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.updName }}
                </template>
            </el-table-column>

            <el-table-column align="center" sortable prop="createTime" width="120">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">提交时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.createTime != null ? scope.row.createTime.substring(0, 10) : '未知' }}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="trackingState" width="130">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">跟踪过程刷新</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.trackingState }}
                </template>
            </el-table-column>

            <el-table-column align="center" prop="remark" width="155">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">备注</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.remark }}
                </template>
            </el-table-column>

            <el-table-column align="center" sortable prop="schemeActualTimes" width="155">
                <template #header><!--自定义表头-->
                    <el-text class="mx-1" type="primary" size="small">提交时间</el-text>
                </template>
                <template #default="scope"><!--自定义列-->
                    {{ scope.row.schemeActualTimes != null ? scope.row.schemeActualTimes.substring(0, 10) : '未定' }}
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-pagination v-model:current-page="search.currentPage" v-model:page-size="search.pageSize"
                :page-sizes="[10, 20, 30, 40]" small="small" :disabled="false" :background="false"
                layout="total, sizes, prev, pager, next, jumper" :total="pageSizeMax" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { computed, ref, reactive, onMounted, watch, defineProps } from 'vue'
import api from '/@/api/sy/apiERP.js';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
const router = useRouter();
const props = defineProps(['param']);
// import { watch } from 'node:fs';

//搜索
const search = ref({
    salesALL: '',//整体模糊搜索
    projectType: '',//指定项目类型
    state: 0,//指定状态
    strTime: null,
    endTime: null,
    currentPage: 1,
    pageSize: 30,
})

// 双击跳转
function on_skipCode(val: string) {
    // router.push({
    //   name: "sales_upd",
    //   query: { salesCode: val},
    // });
    router.push({
        name: "sales_upd",
        params: { salesCode: val },
    });

    // 使用 params 对象传递参数
    //   const params = { salesForecastCode: val };

    // // 使用 name 属性指定路由名称
    // router.push({ name: 'sales_upd', params });  
}
// 双击跳转
function on_skipCode2(val: string) {
    router.push({
        name: "salesforecast_upd",
        params: { salesForecastCode: val },
    });
    // 使用 params 对象传递参数
    //   const params = { salesForecastCode: val };

    // // 使用 name 属性指定路由名称
    // router.push({ name: 'sales_upd', params });  
}
// 搜索框state和projectType的筛选
const searchSelect = ref({
    projectType: [
        { label: 'WMS', value: 'WMS', },
        { label: 'MES', value: 'MES', },
        { label: 'AGV', value: 'AGV', },
        { label: 'SCADA', value: 'SCADA', },
        { label: 'SAP', value: 'SAP', },
        { label: '其它', value: '其它', },
        { label: '全部', value: '', },
    ],//指定项目类型
    state: [
        { label: '跟踪中', value: 1, },
        { label: '丢单', value: 2, },
        { label: '客户取消', value: 3, },
        { label: '已签单', value: 4, },
        { label: '全部', value: 0, },
    ],//指定状态
})

watch(search, (newVal, oldVal) => {
    salesShow()
}, { deep: true }) // 深层监控

//页数
let pageSizeMax = ref<number>(0)
const handleSizeChange = (val: number) => {
    search.value.pageSize = val
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    search.value.currentPage = val
    // console.log(`current page: ${val}`)
}
// 对象类型
interface interfaceSales {
    salesID: number | null,
    salesForecastCode: number | null,
    salesCode: string | null,
    projectType: string | null,
    custName: string | null,
    custPhone: string | null,
    custAddress: string | null,
    number: number | null,
    amount: number | null,
    paymentMethod: string | null,
    remark: string | null,
    userName: number | null,
    updName: number | null,
    state: number | null,
    updateTime: Date | null,
    createTime: Date | null,
    strTime: Date | null,
    endTime: Date | null,
    actualEndTime: Date | null,

    trackingState: string | null

}
// 数组对象
let salesList = ref<interfaceSales[]>([])

// 获取数组对象
function salesShow() {
    api.post('public/sales/getSalesHistoryList', { "salesCode": props.param }).then((response: any) => {
        // 处理服务器返回的响应
        salesList.value = <interfaceSales[]>response.data.data
        console.log(salesList);


    })
        .catch((error: any) => {
            //console.log(error);
            // 处理错误
        })
        .finally(() => {

        })

        ;
}


// 金额显示与隐藏
const amountEX = ref(false)
function on_amountEX() {
    amountEX.value = !amountEX.value
    // console.log(amountEX);

}

onMounted(() => {
    console.log(props)
    salesShow()
    // 在这里写逻辑
});

</script>
  